<template>
  <div id="index" @contextmenu.prevent.native.self="openWindowMenu">
    <div class="notice">
      <h1>公告</h1>
      <ul>
        <li>个人练手项目</li>
        <li>存在一些小bug</li>
        <li>连接云服务器偶尔有点问题,还在找原因</li>
        <li>云服务器需要私钥(安全没有保障哦)</li>
        <li>支持centos, 其它系统没试过</li>
      </ul>
    </div>

    <div class="skills">
      <h1>技术选型</h1>
      <ul>
        <li>Golang</li>
        <li>SSH</li>
        <li>Vue</li>
        <li>ElementPlus</li>
        <li>Axios</li>
      </ul>
    </div>

    <ul v-show="menuVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
      <li @click="handleClickRefresh">刷新</li>
      <li @click="handleToggleNavbar" v-if="navbarConfig.show">隐藏顶栏</li>
      <li @click="handleToggleNavbar" v-else>显示顶栏</li>
    </ul>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'

export default {
  name: "Index",

  computed: {
    ...mapGetters([
      'navbarConfig',
    ]),
  },

  watch: {
    menuVisible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
  },

  data() {
    return {
      name: 0,
      menuVisible: false,
      top: 0,
      left: 0,
    }
  },

  methods: {
    ...mapActions(['addVisitedView']),

    openWindowMenu(e) {
      this.menuVisible = true
      let left = 0, top = 0
      let width = 200
      let height = 75

      left = e.pageX
      top = e.offsetY

      if (e.pageX >= window.innerWidth - width) {
        left = e.pageX - width
      }

      if (e.clientY + height >= window.innerHeight) {
        top = e.offsetY - height
      }

      this.left = left
      this.top = top
    },

    handleToggleNavbar() {
      this.$store.dispatch('toggleNavBar');
    },

    closeMenu() {
      this.menuVisible = false
    },

    handleClickRefresh() {
    },

  }
}
</script>

<style scoped lang="scss">
#index {
  padding: 10px;
  width: 100%;
  height: 100%;
  color: #f3f4f7;
  position: relative;
}

.notice {
  h1 {
    padding: 5px 0;
    border-bottom: 2px solid #f3f4f7;
  }

  li {
    line-height: 2rem;
  }

  ul {
    padding: 20px 0;
  }

  float: left;
  padding: 10px 20px;
  border-radius: 10px;
  width: 30rem;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all .05s;
  text-align: center;

  &:hover {
    box-shadow: 5px 5px 10px #000;
  }
}

.skills {
  h1 {
    padding: 5px 0;
    border-bottom: 2px solid #f3f4f7;
  }

  ul {
    padding: 20px 0;
  }

  margin-left: 20px;
  float: left;
  width: 25rem;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;

  &:hover {
    box-shadow: 5px 5px 10px #000;
  }
}

.contextmenu {
  position: absolute;
  width: 200px;
  height: 75px;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 10px;

  li {
    font-family:   Sans-serif;
    text-align: left;
    color: #000;
    padding: 5px 0 5px 20px;

    &:hover {
      cursor: pointer;
      color: #fff;
      background-color: #9f9fa3;
    }
  }
}
</style>
